<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .outer {
      width: 1000px;
      height: 200px;
      border: 1px solid black;
    }
    .outer:hover .inner1 {
      /* 位移 */
      transform: translateX(900px);
    }
    .inner {
      width: 100px;
      height: 100px;
    }
    .inner1 {
      background-color: aquamarine;
      /* 指定过渡时长 */
      transition-duration: 3s;
      /* transition: 2s; */
    }
    .inner2 {
      background-color: burlywood;
      /* 动画名称 */
      animation-name: atguigu;
      /* 动画时长 */
      animation-duration: 3s;
      /* 动画元素停止到动画的最后一帧 */
      animation-fill-mode: forwards;
    }
    @keyframes atguigu {
      0% {

      }
      100% {
        transform: translate(900px);
      }
    }
  </style>
</head>
<body>
  <!-- 
    动画可以不需要任何触发条件,过渡需要触发条件
    动画可以在执行的过程中更精细的控制动画元素
   -->
  <div class="outer">
    <div class="inner inner1">transform 过渡</div>
    <div class="inner inner2">animation 动画</div>
  </div>
</body>
</html>
